<template>
  <div class="content">
    <div class="header">
      <p>排行榜</p>
    </div>
    <div v-if="rankList.examid != null">
          <!-- 标题 -->
    <div class="title">
      <p>{{rankList.examname}}</p>
    </div>
    <!-- 排名得分概况 -->
    <div class="gaikuang">
      <div class="last_rank">
        <div class="title">
          <i class="iconfont icon-paihangbang_shangcipaiming" />
          <span>上次排名</span>
        </div>
        <div class="num">{{rankList.rank + rankList.rankDiff}}</div>
        <div class="right_bottom">
            <i v-if="rankList.rankDiff < 0" class="iconfont icon-xiajiang" />
            <i class="iconfont icon-shangsheng" />
           <span>
              {{rankList.rankDiff}}名
           </span>
        </div>
      </div>
      <div class="this_rank">
        <div class="title">
          <i class="iconfont icon-paihangbang_bencipaiming" />
          <span>本次排名</span>
        </div>
        <div class="num">{{rankList.rank}}</div>
        <i class=" bgc_icon iconfont icon-paihangbang_bencipaiming" />
      </div>
      <div class="this_score">
        <div class="last_rank">
        <div class="title">
          <i class="iconfont icon-paihangbang_shangcipaiming" />
          <span>本次得分</span>
        </div>
        <div class="num">{{rankList.score}}</div>
        <div class="right_bottom">
          <i v-if="(rankList.score - rankList.scoreDiff) < 0" class="iconfont icon-xiajiang" />
          <i class="iconfont icon-shangsheng" />
          <span> {{rankList.score - rankList.scoreDiff}}分 </span>
        </div>
      </div>
      </div>
    </div>
    <!-- 排行列表 -->
    <div class="box">
      <div class="rankList">
      <div class="item" v-for="(item , index) in rankList.rankVOS" :key="index">
        <div class="num">
          <img v-if="index + 1 == 1" src="../../assets/NO.1.png" alt="">
          <img v-if="index + 1 == 2" src="../../assets/NO.2.png" alt="">
          <img v-if="index + 1 == 3" src="../../assets/NO.3.png" alt="">
          <span v-else-if="(index + 1) > 3">{{ index + 1 }}</span>
          </div>
        <div class="detail">
          <div class="avatar">
            <img :src="item.avatar" alt="">
          </div>
          <div class="txt">
            <p class="name">{{item.username}}</p>
            <p class="time">交卷时间：{{item.date}}</p>
          </div>
          <div :class="[item.score >= 60 ? 'success' : 'danger', 'score']">
            {{item.score}}
          </div>
        </div>
      </div>
    </div>
    </div>
    </div>
    <Empty v-if="rankList.examid == null" text="暂无考试"></Empty>
  </div>
</template>

<script>
export default {
  name: "leaderboard",
  components: {
  },
  data(){
    return{
      rankList:{}
    }
  },
  created(){
    this.getRankList()
  },
  methods:{
    //排名信息
    getRankList(){
      this.axios.get(`/web/student/student/mine/rankList`,{})
      .then((res) => {
        this.rankList = res
      })
    }
  }
}
</script>

<style scoped src="../../style/statistics/leaderboard.css">

</style>